<!--
 * @FileDescription 提示框
 * @Author lz
 * @Date 20230131 16:16:09
 * @LastEditors lz
 * @LastEditTime 20230131 16:16:09
-->
<template>
    <div class="promptBox" v-if="state.show">
        <div class="content">
            <div class="text" v-if="state.types">回答正确!</div>
            <div class="text" v-else>回答错误，请再想一想！</div>
            <img class="ico" src="/structure/Checkmark.png" v-if="state.types">
            <img class="ico" src="/structure/incorrect.png" v-else>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
const state = reactive({
    show: false,
    types: true,
});
// 控制弹出,及内容
function show(val: boolean) {
    state.show = true
    state.types = val
    // 2 秒后自动关闭
    setTimeout(() => {
        state.show = false
    }, 1000);
}
defineExpose({ show })
</script>

<style scoped>
.promptBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: RGBA(0, 0, 0, 0.4);
}

.content {
    width: 477px;
    height: 311px;
    background-image: url('/structure/prompt_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.text {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    padding-top: 60px;
}

.ico {
    width: 120px;
    position: absolute;
    padding-top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
}
</style>